<template>
  <div id="interface-query" ref="interfaceQuery">
    <h1 class="w-title">通讯接口查询</h1>
    <div class="interface-query-table">
      <el-form :model="interfaceQueryForm" size="medium" label-width="100px" ref="interfaceQueryForm" class="form-style-traffic">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="开始日期">
              <el-date-picker
                v-model="interfaceQueryForm.beginDateQuery"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="年/月/日" popper-class="zIndex-popper" size="large">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结束日期">
              <el-date-picker
                v-model="interfaceQueryForm.endDateQuery"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="年/月/日" popper-class="zIndex-popper">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="所属模块">
              <el-select popper-class="zIndex-popper" @change="changeData" v-model="labelValue" placeholder="请选择">
                <el-option label="请选择" value=""></el-option>
                <el-option v-for="item in modelData" :key="item.moduleId" :label="item.moduleName" :value="item.moduleId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="API接口">
              <el-select popper-class="zIndex-popper" v-model="interfaceQueryForm.interfaceQueryAPI" placeholder="请选择">
                <el-option label="请选择" value=""></el-option>
                <el-option v-for="item in info.interfaces" :key="item.interfaceId" :label="item.interfaceName" :value="item.interfaceId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
          <!-- <el-col :span="7">
            <el-form-item label="应用名称">
              <el-select popper-class="zIndex-popper" v-model="interfaceQueryForm.interfaceQueryFormName" placeholder="请选择">
                <el-option label="请选择" value=""></el-option>
                <el-option v-for="item in info.devApps" :key="item.appId" :label="item.appName" :value="item.appId"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
        <el-row :gutter="21">
          <!-- <el-col :span="7">
            <el-form-item label="开发者账户">
              <el-select popper-class="zIndex-popper" v-model="interfaceQueryForm.interfaceQueryAccount" placeholder="请选择">
                <el-option label="请选择" value=""></el-option>
                <el-option v-for="item in info.devAccts" :key="item.devId" :label="item.devAcct" :value="item.devId"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="7">
            <el-form-item label="API接口">
              <el-select popper-class="zIndex-popper" v-model="interfaceQueryForm.interfaceQueryAPI" placeholder="请选择">
                <el-option label="请选择" value=""></el-option>
                <el-option v-for="item in info.interfaces" :key="item.interfaceId" :label="item.interfaceName" :value="item.interfaceId"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <div class="footerbtnlist">
        <el-button type="primary" size="mini" @click="inquiryList">查询</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="apiListTableData"
        style="width: 100%">
        <el-table-column type="index" min-width="50"></el-table-column>
        <el-table-column
          label="请求时间"
          min-width="150">
          <template slot-scope="scope" >
            <span>{{ scope.row.resTime | getLocalDate}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="interfaceName"
          label="接口名称"
          min-width="180">
        </el-table-column>
        <!-- <el-table-column
          prop="devAcct"
          label="开发者账户"
          min-width="150">
        </el-table-column> -->
        <!-- <el-table-column
          prop="appName"
          label="开发者应用名称"
          min-width="210">
        </el-table-column> -->
        <el-table-column
          label="执行状态"
          min-width="85">
          <template slot-scope="scope" >
            <span>{{ scope.row.dealStatus === '0' ? '成功' : '失败'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="usingTime"
          label="执行时间(ms)"
          min-width="95">
        </el-table-column>
      </el-table>
      <div class="trafficpage">
        <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        layout="total, prev, pager, next"
        :total="pageData.total">
      </el-pagination>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import { TopToolbar } from '../../../../components'
  import ajax from '../../../../api/ajax/ajax'
  import api from '../../../../api/url'
  export default {
    name: 'interface-query',
    components: {
      TopToolbar
    },
    data () {
        return {
          loading: true,
          pageData: '', // 分页所需的页数条数
          labelValue: '',
          modelData: [],
          height: null, // 高度
          currentPage: 1, // 页数
          addTopBtn: [ {text: '查询', oprType: 'query'} ], // 按钮传组件值
          apiListTableData: [], // 查询列表的数据
          dialogFormVisible: false, // 弹窗是否显示
          interfaceQueryForm: {
            beginDateQuery: null, // 开始时间
            endDateQuery: null, // 结束时间
            interfaceQueryFormName: '', // 应用名称
            interfaceQueryAPI: '', // 接口名称
            interfaceQueryAccount: '' // 开发者账号
          },
          info: '' // 开发者账户信息
        }
    },
    methods: {
//        重置
      resettingInquiryList () {
        this.interfaceQueryForm.beginDateQuery = null
        this.interfaceQueryForm.endDateQuery = null
        this.interfaceQueryForm.interfaceQueryFormName = ''
        this.interfaceQueryForm.interfaceQueryAPI = ''
        this.interfaceQueryForm.interfaceQueryAccount = ''
      },
//    获取开发者账户信息
      getInfo (value) {
        // this.labelValue = '请选择'
        this.interfaceQueryForm.interfaceQueryAPI = ''
        ajax.post(api.LISTINTERFACEE, {moduleId: value}).then(res => {
          this.info = res
        })
      },
//      通讯接口查询列表
      apiList (num = 1, pageSize = 8) {
        this.loading = true
        let params = {}
            params.BeginDate = this.interfaceQueryForm.beginDateQuery === null ? null : this.interfaceQueryForm.beginDateQuery
            params.EndDate = this.interfaceQueryForm.endDateQuery === null ? null : this.interfaceQueryForm.endDateQuery
            params.appId = this.interfaceQueryForm.interfaceQueryFormName === '' ? null : this.interfaceQueryForm.interfaceQueryFormName
            params.interfaceId = this.interfaceQueryForm.interfaceQueryAPI === '' ? null : this.interfaceQueryForm.interfaceQueryAPI
            params.devId = this.interfaceQueryForm.interfaceQueryAccount === '' ? null : this.interfaceQueryForm.interfaceQueryAccount
          ajax.post(api.LISTGWJN1 + '?pageNum=' + num + '&pageSize=' + pageSize, params, true).then(res => {
            this.pageData = res
            this.pageSize = res.pageSize
            this.apiListTableData = res.list
            this.dialogFormVisible = false
            this.loading = false
            this.currentPage = res.pageNum
          }).catch(res => {
            this.$message({
              showClose: true,
              message: res.errorMsg,
              type: 'warning'
            })
            this.loading = false
          })
      },
      // 下拉框数据改变
      changeData (val) {
        this.getInfo(val)
      },
      // 查询所属模块
      getApiMoudel () {
        ajax.post(api.LIST_API_MODULE_NO_PAGES, {}).then(res => {
          this.modelData = res.list
        })
      },
//      查询列表
      inquiryList () {
        if (this.interfaceQueryForm.beginDateQuery === null && this.interfaceQueryForm.endDateQuery === null) {
          this.apiList()
          return false
        }
        if (this.interfaceQueryForm.beginDateQuery !== null && this.interfaceQueryForm.endDateQuery !== null) {
          this.apiList()
          return false
        }
        this.$message({
          showClose: true,
          message: '请完善日期',
          type: 'warning'
        })
      },
//      分页
      handleCurrentChange (val) {
        this.apiList(val)
      },
//      显示弹窗
      handleToolClick (oprType) {
        this.dialogFormVisible = true
      },
//      弹窗关闭重置
      closeDialog () {
        this.interfaceQueryForm.beginDateQuery = null
        this.interfaceQueryForm.endDateQuery = null
        this.interfaceQueryForm.interfaceQueryFormName = ''
        this.interfaceQueryForm.interfaceQueryAPI = ''
        this.interfaceQueryForm.interfaceQueryAccount = ''
      }
    },
    mounted () {
      // this.getInfo()
      this.apiList()
      this.getApiMoudel()
    },
    filters: {
      getLocalDate (t) {
        let now = new Date(t)
        let year = now.getFullYear()
        let month = now.getMonth() + 1
        let date = now.getDate()
        let hour = now.getHours()
        let minute = now.getMinutes()
        let second = now.getSeconds()
        return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
      }
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #interface-query
    height 100%
    overflow hidden
    .w-title
      height 56px
      line-height 56px
    .i-toolbar-title
      margin-top 10px
    .interface-query-table
      height calc(100% - 66px)
      overflow auto
      overflow-x hidden
      margin 10px
      // padding-top 10px
      // background #fff
    // .trafficpage
    //   margin-top 10px
    .footerbtnlist
      text-align right
      padding-right 20px
      background #ffffff
    .form-style-traffic
      background #ffffff
      padding-top 10px
      .el-date-editor
        width 100% !important
      .el-select
        width 100%
      .el-input
        width 100%
      .el-input__inner
        height 36px
</style>
